{extend name="common/main"}

{block name="css"}
<link rel="stylesheet" href="/static/assets/css/bootstrap.min.css" />
<style>
    .lai{
        float: none;
        display:inline-block;
    }
</style>
{/block}

{block name="body"}
<body data-type="widgets">
{include file="common/index"}
<!-- 内容区域 -->
<div class="tpl-content-wrapper">
    <div class="row-content am-cf">


        <div class="row">

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                <!--<h3>消费记录</h3>-->
                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title  am-cf">充值记录</div>
                    </div>

                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12" >

                        <div class="widget am-cf">
                            <form id="searchform" action=""  method="get" class="am-form tpl-form-border-form tpl-form-border-br">
                                <div class="am-u-sm-12 am-u-md-6 am-u-lg-1">
                                    <div class="am-form-group tpl-table-list-select">
                                        <select  name="type" >
                                            <option value="-1">类型</option>
                                            <option value="月卡" {if $Request.get.type=='月卡'}selected="selected"{/if}>月卡</option>
                                            <option value="季卡" {if $Request.get.type=='季卡'}selected="selected"{/if}>季卡</option>
                                            <option value="年卡" {if $Request.get.type=='年卡'}selected="selected"{/if}>年卡</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="am-u-sm-12 am-u-md-6 am-u-lg-2" style="float: left;">
                                    <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                                        <span class="am-input-group-btn">
                                            <button class="am-btn am-btn-primary am-radius" type="submit" >搜索</button>
                                        </span>
                                    </div>
                                </div>

                            </form>


                            <div class="widget-body  am-fr">
                                <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black " id="example-r1">
                                    <thead>
                                    <tr>
                                        <th><input type="checkbox" id="chkClkDevices" ></th>
                                        <th>IMEI</th>
                                        <th>卡号</th>
                                        <th>类型</th>
                                        <th>时间</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {foreach name="data" key="key" item="v"}
                                    <tr class="gradeX">
                                        <td><input type="checkbox" name="id" class="id" value="{$v.id}"></td>
                                        <td>{$v.imei}</td>
                                        <td>{$v.card_name}</td>
                                        <td>{$v.num}</td>
                                        <td>{$v.addtime|date='Y-m-d H:i:s',###}</td>
                                    </tr>
                                    {/foreach}
                                    </tbody>
                                </table>
                                <div class="am-u-lg-10 am-cf">
                                    <div class="am-fr">
                                        <ul class="am-pagination tpl-pagination">
                                            {$data->render()}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>


    </div>
</div>
</div>
</body>
{/block}

{block name="js"}
<script>
    $(function() {
        var nowTemp = new Date();
        var nowDay = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0).valueOf();
        var nowMoth = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), 1, 0, 0, 0, 0).valueOf();
        var nowYear = new Date(nowTemp.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();
        var $myStart2 = $('#my-start-2');

        var checkin = $myStart2.datepicker({
            onRender: function(date, viewMode) {
                // 默认 days 视图，与当前日期比较
                var viewDate = nowDay;

                switch (viewMode) {
                    // moths 视图，与当前月份比较
                    case 1:
                        viewDate = nowMoth;
                        break;
                    // years 视图，与当前年份比较
                    case 2:
                        viewDate = nowYear;
                        break;
                }

                return date.valueOf() < viewDate ? 'am-disabled' : '';
            }
        }).on('changeDate.datepicker.amui', function(ev) {
            if (ev.date.valueOf() > checkout.date.valueOf()) {
                var newDate = new Date(ev.date)
                newDate.setDate(newDate.getDate() + 1);
                checkout.setValue(newDate);
            }
            checkin.close();
            $('#my-end-2')[0].focus();
        }).data('amui.datepicker');

        var checkout = $('#my-end-2').datepicker({
            onRender: function(date, viewMode) {
                var inTime = checkin.date;
                var inDay = inTime.valueOf();
                var inMoth = new Date(inTime.getFullYear(), inTime.getMonth(), 1, 0, 0, 0, 0).valueOf();
                var inYear = new Date(inTime.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();

                // 默认 days 视图，与当前日期比较
                var viewDate = inDay;

                switch (viewMode) {
                    // moths 视图，与当前月份比较
                    case 1:
                        viewDate = inMoth;
                        break;
                    // years 视图，与当前年份比较
                    case 2:
                        viewDate = inYear;
                        break;
                }

                return date.valueOf() <= viewDate ? 'am-disabled' : '';
            }
        }).on('changeDate.datepicker.amui', function(ev) {
            checkout.close();
        }).data('amui.datepicker');
    });
</script>
{/block}